<!DOCTYPE html>
<html>
<head><title>Form</title></head>
<body>
  <h1>Form Test</h1>

  <div id="person_form">
    <form action="/thanks" method="get">
      <p>
        <label for="first_name">First name</label>
        <input id="first_name" type="text" />
      </p>
      <p>
        <label for="last_name">Last name</label>
        <input id="last_name" type="text" />
      </p>
      <p>
        <label for="biography">Life story</label>
        <textarea id="biography" cols="80" rows="10">
        </textarea>
      </p>
      <p>
        <label for="height">Height</label>
        <select id="height">
          <option value="short">Short</option>
          <option value="average" selected="selected">Average</option>
          <option value="tall" >Tall</option>
        </select>
      </p>
      <p>
        <label for="weight">Weight</label>
        <select id="weight">
          <option value="light">Light</option>
          <option value="medium">Medium</option>
          <option value="heavy">Heavy</option>
        </select>
      </p>
      <p><button value="submit_person_form">Submit person form</button></p>
    </form>
  </div>

  <div id="spouse_form">
    <form action="/thanks" method="get">
      <p>
        <label for="spouse_first_name">First name</label>
        <input id="spouse_first_name" type="text" />
      </p>
      <p>
        <label for="spouse_last_name">Last name</label>
        <input id="spouse_last_name" type="text" />
      </p>
      <p>
        <label for="spouse_weight">Weight</label>
        <select id="spouse_weight">
          <option value="light">Light</option>
          <option value="medium">Medium</option>
          <option value="heavy">Heavy</option>
        </select>
      </p>
      <p>
        <label for="spouse_favorite_color">Favorite Colors</label>
        <input id="spouse_favorite_color" type="text" />
      </p>
      <p><button value="submit_spouse_form">Submit spouse form</button></p>
    </form>
  </div>

  <div id="preferences_form">
    <form action="/thanks" method="get">
      <p>
        <label for="favorite_colors">Favorite Colors</label>
        <select id="favorite_colors" multiple="multiple">
          <option value="r">Red</option>
          <option value="g">Green</option>
          <option value="b">Blue</option>
        </select>
      </p>
      <p>
        <label for="like_cheese">I like cheese</label>
        <input id="like_cheese" type="checkbox" checked="checked"/>
      </p>
      <p>
        <label for="like_salami">I like salami</label>
        <input id="like_salami" type="checkbox" />
      </p>
      <table>
        <tr>
          <th>Apple</th>
          <td>
            <label for="like_apple">Like</label>
            <input id="like_apple" type="checkbox" checked="checked"/>
          </td>
        </tr>
        <tr>
          <th>Banana</th>
          <td>
            <label for="like_banana">Like</label>
            <input id="like_banana" type="checkbox"/>
          </td>
        </tr>
      </table>
      <p>
        <label for="message">Message</label>
        <input id="message" type="text" value="Your message goes here" />
      </p>
      <p><input type="submit" value="Save preferences" /></p>
    </form>
  </div>

  <div id="other_form">
    <form action="/thanks" method="get">
      <p>
        <label for="quotes">Quotes</label>
        <select id="quotes">
          <option value="1">Single 'quotes'</option>
          <option value="2">"Double" quotes</option>
          <option value="3">'Single' and "Double" quotes</option>
        </select>
      </p>
      <p><input id="readonly" type="text" disabled="disabled" /></p>
      <p><input type="submit" value="Save is disabled" disabled="disabled" /></p>
    </form>
  </div>

  <div id="ambiguous_on_name_and_id">
    <form action="#" method="">
      <p><label for="name_is_id">Name or ID</label></p>
      <p><input id="name_is_id" name="name_is_id" type="text" /></p>
    </form>
  </div>

</body>
</html>


